<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>2048</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src='js/jquery-1.10.2.min.js'></script>

</head>

<body>
	<header>
		<h1 class='outTitle inTitle'>Colors</h1>
		<span id='newGame'><a href="javascript:newgame();" >New Game</a></span>
		<p class="inWord outWord">score:<span class='score'>0</span></p>
	</header>

	<div id='grid-container'>
		<div class='grid-cell' id='grid-cell-0-0'></div>
		<div class='grid-cell' id='grid-cell-0-1'></div>
		<div class='grid-cell' id='grid-cell-0-2'></div>
		<div class='grid-cell' id='grid-cell-0-3'></div>

		<div class='grid-cell' id='grid-cell-1-0'></div>
		<div class='grid-cell' id='grid-cell-1-1'></div>
		<div class='grid-cell' id='grid-cell-1-2'></div>
		<div class='grid-cell' id='grid-cell-1-3'></div>

		<div class='grid-cell' id='grid-cell-2-0'></div>
		<div class='grid-cell' id='grid-cell-2-1'></div>
		<div class='grid-cell' id='grid-cell-2-2'></div>
		<div class='grid-cell' id='grid-cell-2-3'></div>

		<div class='grid-cell' id='grid-cell-3-0'></div>
		<div class='grid-cell' id='grid-cell-3-1'></div>
		<div class='grid-cell' id='grid-cell-3-2'></div>
		<div class='grid-cell' id='grid-cell-3-3'></div>
	</div>
	<div class="img-c"><img id='img' class='img-css' src="images/over.jpg"></div>
	
</body>
<script>
	window.onload=function(){
		var inTitle = document.querySelector('.inTitle').textContent;
	    var outTitle = document.querySelector('.outTitle');
	    var inWord = document.querySelector('.inWord').textContent;
	    var outWord = document.querySelector('.outWord');

		 colorWords (inTitle,outTitle);
		 colorWords (inWord,outWord);
		 // $('.inWord:last-child').addClass("score");
		 $('.inWord span:last-child').addClass("score")
	}

 function colorWords (inPlace,outPlace) {
 		var box = inPlace,
	    rs = outPlace,
	    f = [
	      'arial','verdana','monospace',
	      'consolas','helveltica'
	    ],
	    c = [
	      'F67280','0CA5B0','E21B5A','F8CA00',
	      'FABE28','00C176','69D2E7','C7F464','00DFFC'
	    ];
		var out = '';
		for (var i = 0; i < box.length; i++) {
		  // Random array fonts
		  var r = f[Math.floor(Math.random() * f.length)],
		      // Random array colors
		      sh = c[Math.floor(Math.random() * c.length)],
		      st = 'color:#'+sh+
		      ';font-family: '+r+
		      ';text-shadow:0px 1px 0px #'+sh+',0px 2px 0px #'+sh+',0px 3px 0px #'+sh;
		  out += '<span style="'+st+'">'+box[i]+'</span>';
		}  
		rs.innerHTML = out; 
 }
</script>
<script type="text/javascript" src='js/main.js'></script>
</html>
